<template>
  <div id="">
    <headerbox :headerTitle="'首页'" :hasBack='false'></headerbox>
    <bannerslider></bannerslider>
    <div class="p10 bgWhite mb10">
      <p class="pTit">分类</p>
      <sportsClass :classifyList="classifyList"></sportsClass>
    </div>
    <div class="p10 bgWhite mb10">
      <activityType></activityType>
    </div>
    <div class="bgWhite">
      <tab :tabArr="tabArr" @tabEvent="tabEvent"></tab>
      <div class="" v-if="tabIdx==0" style="height:80vh; overflow:scroll"
      @touchstart.capture="touchstart"
      @touchend.capture="touchend"
      @scroll="onScroll">    <!-- 热门推荐 -->
        <noneList v-if="matchHotList.length==0" :noneTxt="'暂无相关推荐'"></noneList>
        <hotEvent v-else v-for="elem in matchHotList" :key="elem.key" :eventItem="elem" class="mb10"
        @click.native="toEventdetail(elem.id)"></hotEvent>
      </div>
      <div class="acList p10" v-if="tabIdx==1"
      @touchstart.capture="touchstart"
      @touchend.capture="touchend">    <!-- 活动达人 -->
        <noneList v-if="authHotList.length==0" :noneTxt="'还没有达人们'"></noneList>
        <eventItem v-else v-for="item in authHotList" :key="item.key" :eventItem="item"
        class="acItem mb10"></eventItem>
      </div>
      <div class="" v-if="tabIdx==2">    <!-- 好友进行时 -->
        <noneList v-if="matchFriendList.length==0" :noneTxt="'您还没有好友信息'"></noneList>
        <friending v-else v-for="elem in matchFriendList" :key="elem.key" :friendItem="elem"></friending>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>
<script>
import {getClassifyList,matchHotIndex,matchFriendHand,authHotUser} from '@/utils/ajaxRequest.js';

export default {
  name: "",
  data: () => ({
    tabArr:['热门推荐','活动达人','好友进行时'],
    classifyList:[],
    tabIdx:0,
    token:'',
    matchHotList:[],
    matchFriendList:[],
    authHotList:[],
    pageNo:1,
    infiniteLoading:true,   //true可加载更多
  }),
  components: {
    bannerslider:()=>import('./bannerslider/bannerslider'),
    sportsClass:()=>import('./sportsClass/sportsClass'),
    activityType:()=>import('./activityType/activityType'),
    tab:()=>import('@/components/tab'),
    eventItem:()=>import('./eventItem/eventItem'),
    friending:()=>import('./eventItem/friending'),
    hotEvent: ()=>import('@/pages/events/eventItem/eventItem'),
    noneList: ()=>import('@/components/noneList/noneList'),

  },
  methods: {
    onScroll(e) {
      console.log(e);
      if(this.infiniteLoading) {
        this.pageNo ++;
      }
    },
    touchstart(e) {
      console.log(e.changedTouches[0].clientY);
    },
    touchend(e) {
      console.log(e.changedTouches[0].clientY);
    },
    toEventdetail(matchId) {
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      if (!xlyd_loginInfo) {
        this.messageBox.confirm('登录后查看赛事详情~').then(active=>{
          this.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
        return false
      }
      this.$router.push({path:'/eventDetail',query:{matchId:matchId}});
    },
    tabEvent(data) {
      this.tabIdx = data;
      this.pageNo = 1;
      if (data==0) {

      }else if (data==1) {
        this.getAuthHot();
      }else if (data==2) {
        if(this.token=='') {
          this.messageBox.confirm('您还未登录，暂无好友情况，前往登录？').then(active=>{
            this.$router.push({name:'login'});
          }).catch(error=>{
            console.log(error);
          })
        }else{
          this.getMatchFriend();
        }

      }
    },
    // 热门推荐
    getMatchHot() {
      let self = this;
      let matchHotParam = {
        token:self.token,
        currentPage:self.pageNo,
      }
      matchHotIndex(matchHotParam).then(res=>{
        console.log(res);
        self.matchHotList = res.data.result;
      })
    },
    // 好友进行时
    getMatchFriend() {
      let self = this;
      let matchHotParam = {
        token:self.token,
        currentPage:self.pageNo,
      }
      matchFriendHand(matchHotParam).then(res=>{
        console.log(res);
        self.matchFriendList = res.data.result;
      })
    },
    // 教练推荐（活动达人）
    getAuthHot() {
      let self = this;
      let matchHotParam = {
        token:self.token,
        currentPage:self.pageNo,
      }
      authHotUser(matchHotParam).then(res=>{
        console.log(res);
        self.authHotList = res.data.result;
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    console.log(xlyd_loginInfo);
    this.token = xlyd_loginInfo?xlyd_loginInfo.token : '';
    // 分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res) {
        this.classifyList = res.data.result;
      }
    });

    self.getMatchHot();
    // self.getMatchFriend();
    // self.getAuthHot();
  }
}
</script>
<style lang="scss" scoped>
  .pTit{
    border-left: 3px solid $blueColor;
    padding-left: 6px;
    margin-bottom: 10px;
  }
  .acList{
    @include flex;
    flex-wrap: wrap;
    .acItem{
      width: 49%;
      margin-right: 2%;
      margin-bottom: 20px;
      &:nth-child(2n){
        margin-right: 0;
      }
    }
  }
</style>
